<template>
	<div class="content">
		<div class="allmap" ref="allmap"></div>
		<div class="tab">
			<div class="arrow" @click="arrClick">V</div>
			<navbar v-model="selected">
			  <tab-item id="1">酒店</tab-item>
			  <tab-item id="2">景点</tab-item>
			</navbar>
			<!-- tab-container -->
			<tab-container v-model="selected">
			  <tab-container-item id="1">
			    <cell 
					v-for="item of addressList[0]" 
					:title="item.title" 
					:label="item.label" 
					:key="item.id" 
					@click.native="cellClick(item.id)"
					/>
			  </tab-container-item>
			  <tab-container-item id="2">
			    <cell
				 v-for="item of addressList[1]"
				 :title="item.title" 
				 :label="item.label" 
				 :key="item.id" 
				 @click.native="cellClick(item.id)"
				/>
			  </tab-container-item>
			</tab-container>
		</div> 
	</div>
</template>

<script>
	import markerImg from "../../../assets/img/marker.png"
import { 
	Navbar,
	TabItem,
	TabContainer, 
	TabContainerItem,
	Cell
	} from 'mint-ui'
export default {
  name: 'mapContent',
  data(){
	  return{
		  flag:'1',
		  clickFlag:'0',
		  selected:"1",
		  addressList:[
			  [
				  {
					  id:'1',
					  label:'北京大栅栏',
					  title:'北京大栅栏'
				  },
				  {
					  id:'2',
					  label:'北京天安门',
					  title:'北京天安门'
				  }
			  ],
			  [
				  {
					  id:'1',
					  label:'北京颐和园',
					  title:'北京颐和园'
				  },
				  {
					  id:'2',
					  label:'北京圆明园',
					  title:'北京圆明园'
				  }
			  ]
		  ]
	  }
  },
  components:{
	  Navbar,
	  TabItem,
	  TabContainer, 
	  TabContainerItem,
	  Cell
	  
  },
  watch:{
	  //利用监听器判断点击的是左边还是右边
	  selected(val){
		  if (val === '1') {
		  	//点击的是左边
			this.flag = '1'
		  } else{
		  	//点击的是右边
			this.flag = '2'
		  }
	  }
  },
  methods:{
	  addMasker(n,m){
		  var map = new BMap.Map(this.$refs.allmap)
		  var myGeo = new BMap.Geocoder()
		  for (let i = 0; i < this.addressList.length; i++) {
		  	for (let j = 0; j < this.addressList[i].length; j++) {
				var title = this.addressList[n][m]
				myGeo.getPoint(this.addressList[i][j].title,function(point){
					// console.log(point)
					if(point){
						if(i===n&&j===m){
							map.centerAndZoom(point,15)
							var myIcon = new BMap.Icon(
							markerImg,new BMap.Size(50,50),{
								imageOffset:new BMap.Size(14,2)
							})
							var marker = new BMap.Marker(point,{icon:myIcon})
							map.addOverlay(marker)
							console.log(title)
							console.log(title.title)
							//添加信息窗口
							var infoWindow = new BMap.InfoWindow(title.title)
							infoWindow.setWidth(250)
							infoWindow.setHeight(60)
							map.openInfoWindow(infoWindow,map.getCenter())
						}
						else{
							map.centerAndZoom(point,15)
							var marker = new BMap.Marker(point)
							map.addOverlay(marker)
						}
					}else{
						alert("对不起，找不到相应地址")
					}
				})
		  	}
		  }
	  },
	  cellClick(id){
		  if (this.flag === '1') {
		  	let page = parseInt(this.flag)-1
		  	let index = parseInt(id)-1
			this.addMasker(page,index)
		  } else{
		  	let page = parseInt(this.flag)-1
		  	let index = parseInt(id)-1
		  	this.addMasker(page,index)
		  }
	  },
	  arrClick(){
		  if (this.clickFlag === '0') {
		  	this.$refs.allmap.style.height = '20%'
			this.clickFlag = '1'
		  } else{
		  	this.$refs.allmap.style.height = '60%'
		  }
	  }
  },
  mounted() {
  	this.addMasker(0,0)
  }
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.content
  position:absolute
  top:0
  left:0
  right:0
  bottom:0
  background:#fff
  z-index:100
  .allmap
    position:relative
    top:0
    left:0
    right:0
    bottom:.6rem
    z-index:11111
    height:60%
  .tab
    color:#000
    .arrow
      text-align:center
</style>
